<template>

    <van-swipe @change="onChange"  :autoplay="1000" lazy-render indicator-color="red" class="my-swipe" >
        <van-swipe-item v-for="image in images" :key="image" class="van-swipe-item">
            <img :src="image" alt="" class="center-image" />
        </van-swipe-item>
    </van-swipe>

    <ul>

    </ul>
</template>

<script setup>
import { showToast } from 'vant';
const images= ['https://xps01.xiaopeng.com/cms/material/pic/2024/07-28/pic_20240728194639_29977.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2024/07-15/pic_20240715095914_45407.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2024/04-11/pic_20240411093020_64152.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2023/12-29/pic_20231229181319_97707.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2024/06-13/pic_20240613154045_58248.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2024/03-25/pic_20240325100430_54769.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2023/09-18/pic_20230918175320_99658.jpg',
    'https://xps01.xiaopeng.com/cms/material/pic/2023/09-25/pic_20230925172656_24673.jpg',
]
const onChange = (index) => showToast( index);

</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.center-image {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
}
.van-popup.van-popup--center.van-toast.van-toast--middle.van-toast--text{
width: 10px;
}
</style>